<template>
    <div class="car-container" >
        <div style="">热门书籍</div>
        <div class="carousel-inner" :style="{left:w+'px'}" @mouseenter="sta"
         @mouseout="out">
            <div class="carousel-item active">
                <img :src="getlocalhost+books[9].Book.imgUrl" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item active" v-for="(img,index) in books" :key="index">
                <img :src="getlocalhost+img.Book.imgUrl"
                @click="pushde(img.BookId)"
                 class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item active">
                <img :src="getlocalhost+books[0].Book.imgUrl" class="d-block w-100" alt="...">
            </div>
        </div>
  
</div>
</template>

<script>
export default {
    data(){
        return{
            books:null,
            num:1,
            w:-200,
            clearT:null
        }
    },
    async created(){
        this.books = await this.$axios.get("/api/book/getBookTop");
        console.log(this.books);
    },
    mounted(){
        this.interval();
    },
    methods:{
        
        sta(){//鼠标移入清除计时器，轮播图暂停
            clearInterval(this.clearT);
        },
        pushde(id){//点击轮播图跳转到该图书的详情页
             this.$router.push(`/detalist?${id}`);
        },
        out(){//鼠标移出轮播图，轮播图定时器开启
            this.interval();
        },
        interval(){//轮播图定时器
             this.clearT = setInterval(()=>{
            if(this.num < 11){
                this.w = -200 * this.num;
                this.num++;
            }else{
               
                this.w = -200;
                this.num = 1
            }

        },1500)
        }
    },
    computed:{
        getlocalhost(){//
            return this.$axios.defaults.baseURL
        }
    }
}
</script>
<style lang="less" scoped >

@media screen and (max-width:600px) {
  
  .car-container{display: none !important};
    
}
.car-container{
    width: 200px !important;
    height: 300px;
    position:fixed;
    left: 20px;
    top: 35%;
    text-align: center;
    overflow: hidden;
    cursor: pointer; 
    font-weight: 700;
    color: #FE2D46;
    .carousel-inner{
        
        display: flex;
        position:absolute;
        width:100%;
        height: 100%;
        transition: left 0.2s;
        // overflow: hidden;
        img{
            width: 200px;
            height: 300px;
        }
    }
    
}

</style>
